<script setup>
import imgIconChart from '@/assets/image/index/icon-chart.png'
import imgIconMap from '@/assets/image/index/icon-map.png'

const activeTab = ref('left')
</script>

<template>
  <section class="ui-tab-parts">
    <n-tabs
      class="ui-tabs"
      :value="activeTab"
      size="large"
      :animated="false"
      justify-content="end"
      pane-wrapper-style="margin: 0 -4px"
      pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
    >
      <n-tab-pane name="left">
        <div class="ui-part">
          <slot name="left" />
        </div>
        <template #tab>
          <div class="ui-tab" :class="activeTab === 'left' && 'active'" @click="activeTab = 'left'">
            <div class="ui-tab__wrap">
              <n-image
                class="ui-tab__icon"
                height="100%"
                :src="imgIconMap"
                preview-disabled
              />
              <div class="ui-tab__text">
                地图模式
              </div>
            </div>
          </div>
        </template>
      </n-tab-pane>
      <n-tab-pane name="right">
        <div class="ui-part">
          <slot name="right" />
        </div>
        <template #tab>
          <div class="ui-tab" :class="activeTab === 'right' && 'active'" @click="activeTab = 'right'">
            <div class="ui-tab__wrap">
              <n-image
                class="ui-tab__icon"
                height="100%"
                :src="imgIconChart"
                preview-disabled
              />
              <div class="ui-tab__text">
                柱状图模式
              </div>
            </div>
          </div>
        </template>
      </n-tab-pane>
    </n-tabs>
  </section>
</template>

<style lang='scss' scoped>
.ui-tab-parts {
  height: 100%;

  .ui-tabs {
    height: 100%;

    .ui-tab {
      padding: 4px;
      background: linear-gradient(180deg, #00D0FF1A 0%, #1F85FF33 100%);
      border-radius: 10px;
      transition: all 0.3s ease-in-out;
      will-change: background;

      &__wrap{
        display: flex;
        align-items: center;
        padding: 0 4px;
        color: #FFF;
        background: linear-gradient(180deg,rgb(0 90 255 / 0%) 0%, rgb(0 113 255 / 21%) 100%);
        border: 1px solid;
        border-radius: 6px;
        border-image: linear-gradient(180deg, rgb(0 113 255 / 0%) 50%, #0af 100%) 1 1;
        transition: all 0.3s ease-in-out;
        will-change: padding;
      }

      &__text {
        max-width: 0;
        opacity: 0;
        transition: all 0.3s ease-in-out;
        will-change: max-width, opacity;
      }

      &.active {
        background: linear-gradient(90deg,rgb(0 208 255 / 50%), rgb(31 133 255 / 50%) 100%);

        .ui-tab {
          &__wrap{
            padding: 0 8px;
          }

          &__text {
            max-width: 200px;
            opacity: 1;
          }
        }
      }
    }

    .ui-part {
      height: 100%;
      overflow: auto;
    }
  }

  // naive n-tab overrides
  :deep(.n-tabs) {
    .n-tabs-tab {
      padding: 0;
    }

    .n-tabs-wrapper {
      padding: 0 20px;
    }

    .n-tabs-pane-wrapper {
      flex: 1;
      min-height: 0;
    }

    .n-tabs-tab-pad {
      width: 12px;
    }

    .n-tabs-bar {
      display: none;
    }

    .n-tab-pane {
      height: 100%;
    }

    &.n-tabs--top .n-tab-pane {
      padding-top: 0;
    }
  }
}
</style>
